import { Tabs } from 'antd-mobile'
import React, { useState ,useRef, useEffect} from 'react'
import { Button, SearchBar, Space, Toast } from 'antd-mobile'
import './Suo.css'
import { Input } from '@nutui/nutui-react'
import { Popup, Cell } from '@nutui/nutui-react'
import { Popover } from '@nutui/nutui-react'
import axios from 'axios'
// import { MapContainer, TileLayer, Marker, Popup, Polyline } from 'react-leaflet';
// import L from 'leaflet';
export default function Suo() {
  const marginStyle = { margin: 8 ,
  width: '550px',
  height: '100%',
  backgroundColor: 'red',
  borderRadius: '10px',
  padding: '10px'
  }
  
  const [showTop, setShowTop] = useState(false)
  const [basic, setBasic] = useState(false)
  const itemList = [
    {
      key:'key1',
      name: '请选择快递公司',
      logisticsCode:'请选择快递公司'
    },
    {
      key: 'key11',
      name: '中通快递',
      logisticsCode: 'ZTO'
    },
    {
      key: 'key2',
      name: '圆通速递',
      logisticsCode: 'YTO'

    },
    {
      key: 'key3',
      name: '韵达速递',
      logisticsCode: 'YD',

    },
    {
      key: 'key4',
      name: '申通快递',
      logisticsCode: 'STO',

    },
    {
      key: 'key5',
      name: '顺丰速运',
      logisticsCode: 'SF',
    },
    {
      key: 'key6',
      name: '京东快递',
      logisticsCode: 'JD',
    },
    {
      key: 'key7',
      name: '邮政快递包裹',
      logisticsCode: 'YZPY',
    },
    {
      key: 'key8',
      name: '极兔速递',
      logisticsCode: 'JT',
    },
    {
      key: 'key9',
      name: '宅急送',
      logisticsCode: 'ZJS',
    },
    {
      key: 'key10',
      name: '澳邮中国快运AuExpress',
      logisticsCode: 'AUEXPRESS'
    },

  ]
  //快递公司名称
  const [logisticsCode,setlogisticsCode] = useState('')
  //快递单号
  const [trackingNumber,settrackingNumber] = useState('')
  //快递信息
  const [kd,getkd] = useState([])
  //获取快递的是否有没有数据
  const [isData,setisData] = useState('')
  //获取当前的位置
  const [location, setLocation] = useState('');
  //点击添加按钮
  const cax=async()=>{
    console.log('快递公司:'+logisticsCode+'快递单号:'+trackingNumber)
    if(logisticsCode==='请选择快递公司'){
      alert('请选择快递公司')
    }else{
      await axios.get(`http://localhost:3500/track?logisticsCode=${logisticsCode}&trackingNumber=${trackingNumber}`)
      .then((res)=>{
        console.log(res.data)
        //获取的数据反向赋值给kd
        getkd(res.data.details.Traces.reverse())
        //获取数据是否为空
        setisData(res.data.details.Traces.length)
        //获取当前的位置
        setLocation(res.data.details.Coordinates[0].LatAndLng)
        
       })
    }
  }
  console.log(kd);
  console.log(isData);
  console.log(location.split(',')[0], location.split(',')[1]);
  //地图
  const mapContainer = useRef(null);
  useEffect(() => {
            if (mapContainer.current) {
                const script = document.createElement('script');
                script.src = `https://webapi.amap.com/maps?v=1.4.15&key=deeee393127e25f136dccebb128b6b42`;
                script.async = true;
                script.defer = true;
                document.head.appendChild(script);
    
                script.onload = () => {
                    const map = new window.AMap.Map(mapContainer.current, {
                        center: [116.397428, 39.90923],
                        zoom: 7
                    });
    
                    const marker = new window.AMap.Marker({
                        position: [location.split(',')[0], location.split(',')[1]], // 设置标记点的位置
                        map: map
                    });
    
                    // 创建信息框内容，这里可以自定义更详细的文本、样式等
                    const infoContent = '<div style="padding: 10px;">这是特定定位点信息，你可以按需修改这里的内容哦！</div>';
                    const infoWindow = new window.AMap.InfoWindow({
                        content: infoContent
                    });
    
                    // 为标记点添加点击事件，点击时弹出信息框
                    marker.on('click', () => {
                        infoWindow.open(map, marker.getPosition());
                    });
                };
            }
        });
  
  return (
    <div className='pox'>
      <Tabs>
        <Tabs.Tab title='我寄' key='fruits'>
          暂无数据

        </Tabs.Tab>

        <Tabs.Tab title='我收' key='vegetables'>
          <Cell
            title="添加你要查询的快递单号"
            onClick={() => {
              setShowTop(true)
            }}
          />
          <Popup
            visible={showTop}
            destroyOnClose
            position="top"
            onClose={() => {
              setShowTop(false)
            }}
            style={{
              width:'580px'
            }}
          >
            {/**只显示快递名称name */}
            <select style={{
              width: '100%',
              height: '40px',
              border: '1px solid #ccc',
              borderRadius: '5px',
              }}
              onClick={(e) => {
                setlogisticsCode(e.target.value)
              }}
            >
              {itemList.map((item) => (
                <option value={item.logisticsCode} key={item.key} >{item.name}</option>
              ))}
            </select>
            <Input placeholder="请输入快递单号" value={trackingNumber} onChange={(e)=>{settrackingNumber(e)}}/>
            <Button type="success" style={marginStyle} onClick={()=>cax()}>
              查询
            </Button>
          </Popup>
          {
            isData===0?<div style={{width: '100%',height: '80px',border: '1px solid #ccc',borderRadius: '5px'}}>暂无数据</div>:null
          }
          {
            isData!==0&&location?<div ref={mapContainer} style={{ width: '100%', height: '500px' }}></div>:null
          }
          {
          kd.map(item=>
            <div style={{width: '100%',height: '80px',border: '1px solid #ccc',borderRadius: '5px',marginBottom: '10px',
              fontSize: '14px'
            }}>{item.AcceptStation}</div>
          )
        }
        </Tabs.Tab>
       
        <Tabs.Tab title='待支付' key='animals'>
          暂无数据

        </Tabs.Tab>
      </Tabs>

    </div>
  )
}



